<template>
    <div class="content">
        <div
            class="list"
            v-if="workList[0].orderCreatedate!=null"
        >
            <div class="row">
                <div class="col-md-1">
                    <span class="c-span1">创建：</span>
                </div>
                <div class="col-md-5">
                    <span class="c-span2">{{workList[0] && workList[0].orderCreatename}}</span>
                </div>
                <div class="col-md-1">
                    <span class="c-span1">时间：</span>
                </div>
                <div class="col-md-5">
                    <span class="c-span2">{{workList[0] && workList[0].orderCreatedate}}</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-1">
                    <span class="c-span1">描    述：</span>
                </div>
                <div class="col-md-5">
                    <span class="c-span2">{{workList[0] && workList[0].orderDesc}}</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 line">
                </div>
            </div>
        </div>
        <div
            class="list"
            v-if="distributeList.length!=0"
        >
            <div class="row">
                <div class="col-md-1">
                    <span class="c-span1">派发：</span>
                </div>
                <div class="col-md-5">
                    <span class="c-span2">{{distributeList[0] && distributeList[0].personName}}</span>
                </div>
                <div class="col-md-1">
                    <span class="c-span1">时间：</span>
                </div>
                <div class="col-md-5">
                    <span class="c-span2">{{distributeList[0] && distributeList[0].distributeCreatedate}}</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-1">
                    <span class="c-span1">描    述：</span>
                </div>
                <div class="col-md-5">
                    <span class="c-span2">{{distributeList[0] && distributeList[0].distributeDesc}}</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 line">
                </div>
            </div>
        </div>

        <div
            v-for="item in drList"
            :key="item.vlue"
        >

            <div
                class="list"
                v-if="item.materialName !=null"
            >
                <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">签到时间：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item.signTime}}</span>
                    </div>
                    <div class="col-md-6">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">签到位置：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">X:{{item.signX}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Y:{{item.signY}}</span>
                    </div>
                    <div class="col-md-6">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 line">
                    </div>
                </div>
            </div>

            <div
                class="list"
                v-if="item.materialName !=null"
            >
                <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">现场确认：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item.materialName}}</span>
                    </div>
                    <div class="col-md-1">
                        <span class="c-span1">时间：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item.materialCreatedate}}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">事件原因：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item.orderReason}}</span>
                    </div>
                    <div class="col-md-6">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">机械开挖：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item.excavate}}</span>
                    </div>
                    <div class="col-md-6">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">描    述：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item.materialDesc}}</span>
                    </div>
                </div>
                <div
                    class="row"
                    v-if="item.materialPhotopath != null&&item.materialPhotopath.length>0"
                >
                    <div class="col-md-5 col-md-offset-1">
                        <div
                            class="col-md-2"
                            v-for="itemImg in item.materialPhotopath"
                            :key="itemImg.value"
                        >
                            <img
                                :src="itemImg"
                                alt=""
                                @click="clickImg($event)"
                            >
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">
                            <i
                                class="fa fa-tags"
                                aria-hidden="true"
                            ></i>
                        </span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span3">
                            <a href="javascript:">领料单</a>
                        </span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 line">
                    </div>
                </div>
            </div>

            <div
                class="list"
                v-if="item.disposeName!=null"
            >
                <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">处理：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item && item.disposeName}}</span>
                    </div>
                    <div class="col-md-1">
                        <span class="c-span1">时间：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item && item.disposeCreatedate}}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">描    述：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item && item.disposeDesc}}</span>
                    </div>
                </div>
                <div
                    class="row"
                    v-if="item.photopathList != null && item.photopathList.length>0"
                >
                    <div class="col-md-5 col-md-offset-1">
                        <div
                            class="col-md-2"
                            v-for="itemImg in item.photopathList"
                            :key="itemImg.value"
                        >
                            <img
                                :src="itemImg"
                                alt=""
                                @click="clickImg($event)"
                            >
                        </div>
                    </div>
                </div>
                <!-- <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">
                            <i class="fa fa-tags" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span3">
                            <a href="javascript:">***附件（如有）</a>
                        </span>
                    </div>
                </div> -->
                <div class="row">
                    <div class="col-md-4 line">
                    </div>
                </div>
            </div>
            <div
                class="list"
                v-if="item.reviewPerson !=null"
            >
                <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">审核：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item && item.reviewPerson}}</span>
                    </div>
                    <div class="col-md-1">
                        <span class="c-span1">时间：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item && item.reviewCreatedate}}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-1">
                        <span class="c-span1">审核结果：</span>
                    </div>
                    <div class="col-md-5">
                        <span
                            class="c-span2"
                            v-if="item.reviewStatus==1"
                        >通过</span>
                        <span
                            class="c-span2"
                            v-if="item.reviewStatus==0"
                        >不通过</span>
                    </div>
                </div>
                <div
                    class="row"
                    v-if="item.reviewStatus==0"
                >
                    <div class="col-md-1">
                        <span class="c-span1">描    述：</span>
                    </div>
                    <div class="col-md-5">
                        <span class="c-span2">{{item && item.reviewReason}}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 line">
                    </div>
                </div>
            </div>
        </div>
        <div
            class="list"
            v-if="callbackList.length!=0"
        >
            <div class="row">
                <div class="col-md-1">
                    <span class="c-span1">回访：</span>
                </div>
                <div class="col-md-5">
                    <span class="c-span2">{{workList[0] && workList[0].orderCreatename}}</span>
                </div>
                <div class="col-md-1">
                    <span class="c-span1">时间：</span>
                </div>
                <div class="col-md-5">
                    <span class="c-span2">{{callbackList[0] && callbackList[0].callbackCreatedate}}</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-1">
                    <span class="c-span1">描    述：</span>
                </div>
                <div class="col-md-5">
                    <span class="c-span2">{{callbackList[0] && callbackList[0].callbackDesc}}</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 line">
                </div>
            </div>
        </div>
        <div
            style="margin-top:50px;"
            v-if="formList.orderStatus < 5"
        >
            <button
                type="button"
                class="btn btn-block btn-primary"
                @click="deal"
            >办理</button>
        </div>
        <bigImg
            v-if="showImg"
            @clickit="viewImg"
            :imgSrc="imgSrc"
        />

    </div>
</template>

<script>
import bigImg from "@/components/common/bigImg.vue";

export default {
    props: ["formList"],
    data() {
        return {
            workList: [{
                orderCreatedate: null,
            }],
            distributeList: [],
            materialList: [{ photopathList: [] }],
            disposeList: [],
            reviewList: [],
            drList: [{ photopathList: [] }],
            callbackList: [],
            old: "",
            reviewStatus: "",
            showImg: false,
            imgSrc: ''
        };
    },
    components: {
        bigImg
    },
    watch: {
        formList() {
            if (!!this.formList.orderId) {
                this.old = this.formList.orderStatus;
                this.getEventWorkinfo();
            }
        }
    },
    mounted() {
        // this.getEventWorkinfo();
    },
    methods: {
        clickImg(e) {
            this.showImg = true;
            // 获取当前图片地址
            this.imgSrc = e.currentTarget.src;
        },
        viewImg() {
            this.showImg = false;
        },
        getEventWorkinfo() {
            this.$api.ticket.list
                .eventWorkinfo({
                    orderId: this.formList.orderId
                })
                .then(res => {
                    if (res.success) {
                        // console.log(res.data);
                        this.workList = res.data.workList;
                        this.distributeList = res.data.distributeList;
                        this.materialList = res.data.materialList;
                        this.disposeList = res.data.disposeList;
                        this.reviewList = res.data.reviewList;
                        this.drList = res.data.drList;
                        this.callbackList = res.data.callbackList;
                        this.reviewStatus = res.data.reviewStatus || "2";
                        // console.log(this.drList);
                    }
                });
        },
        time(data) {
            var time = data;
            var d = new Date(time);
            var times =
                d.getFullYear() +
                "-" +
                (d.getMonth() + 1) +
                "-" +
                d.getDate() +
                " " +
                d.getHours() +
                ":" +
                d.getMinutes() +
                ":" +
                d.getSeconds();
            return times;
        },
        deal() {
            this.$emit("isActive");
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content {
    padding: 30px 50px;
    .row {
        div {
            line-height: 30px;
            margin-bottom: 10px;
        }
        .c-span1 {
            display: inline-block;
            width: 100%;
            text-align: right;
            font-weight: 700;
        }
        .c-span2 {
            display: inline-block;
            word-wrap: break-word;
            word-break: normal;
            width: 100%;
        }
        .line {
            height: 0;
            border-top: 1px solid #b2afb3;
        }
        .col-md-offset-1 {
            height: 90px;
        }
        img {
            width: 90px;
            height: 90px;
            margin-right: 45px;
            cursor: pointer;
        }
    }
    .btn-primary {
        width: 80px;
        line-height: 30px;
        height: 30px;
        margin: 0 auto;
        padding: 0;
    }
}
</style>
